<template>
  <div class="user-collect">
    <div class="collect-tab user-operate-tab">
      <div
        :class="{ active: currentKey === 'article' }"
        @click="currentKey = 'article'">文章</div>
      <div
        :class="{ active: currentKey === 'tool' }"
        @click="currentKey = 'tool'">工具</div>
    </div>
    <ArticleCategory
      v-show="currentKey === 'article'"
      :loading="loading"
      :article-list="articleList" />
    <div v-show="currentKey === 'tool'" >
      <div v-if="!toolList.length" style="padding: 30px 0; background: #fff;">
        <a-empty
          description="暂无数据"
          :image="require('~/assets/images/nodata.png')"
        />
      </div>
      <div
        v-else
        class="user-collect-tool-list">
        <div
          v-for="(item, index) in toolList"
          :key="item.toolId"
          target="_blank"
          :href="item.url"
          class="user-collect-tool-list-item">
          <div class="icon">
            <img :src="item.logo || require('~/assets/images/folder.png')" alt="link">
          </div>
          <a target="_blank" :href="item.url" class="tool-info">
            <p>{{  item.name  }}</p>
            <span>{{ item.description || '此工具还没有添加描述信息' }}</span>
          </a>
          <div class="operate-bar" v-if="userId === userInfo.id">
            <i title="取消收藏" @click.stop="resetCollectTool(item, index)" class="ri-dislike-line reset-collect"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ArticleCategory from '../components/ArticleCategory'
export default {
  name: 'UserCollect',
  components: { ArticleCategory },
  props: {
    userId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      toolList: [],
      loading: false,
      articleList: [],
      currentKey: this.$route.query.type || 'article'
    }
  },

  created () {
    console.log(this.$route.query)
    this.findCollectArticles()
    this.findCollectTools()
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },

  methods: {
    /**
     * 查询该用户下已收藏的所有文章
     */
    async findCollectArticles () {
      this.loading = true
      try {
        const { data } = await this.$axios.get(
          `/gimishare/api/v1/articles/collected?userId=${this.userId}`
        )
        this.articleList = data
      } catch (error) {
      } finally {
        this.loading = false
      }
    },

    /**
     * 查询改用华夏已收藏的所有工具
     */
    async findCollectTools () {
      try {
        const { data } = await this.$axios.get(
          `/gimishare/api/v1/users/getcollecttools?userId=${this.userId}`
        )
        this.toolList = data
      } catch (error) {
      }
    },

    async resetCollectTool (toolItem, idx) {
      try {
        await this.$axios.get(`/gimishare/api/v1/users/uncollecttool?toolId=${toolItem.toolId}`)
        this.toolList.splice(idx, 1)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.user-collect {
  padding-bottom: 30px;
  .user-collect-tool-list {
    &-item {
      display: flex;
      align-items: center;
      background: #fff;
      border-bottom: 1px solid #f1f1f1;
      padding: 20px 12px;
      .icon {
        width: 28px;
        height: 28px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 2px;
          object-fit: cover;
        }
      }
      .tool-info {
        padding-left: 10px;
        flex: 1;
        width: 0;
        &:hover {
          p {
            text-decoration: underline;
          }
        }
        p {
          font-size: 14px;
          color: #000;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span {
          color: #999;
          font-size: 12px;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .operate-bar {
        padding-right: 12px;
        .reset-collect {
          transition: .3s;
          opacity: 0;
          cursor: pointer;
          color: #000;
          font-size: 18px;
        }
      }
      &:hover {
        .reset-collect {
          opacity: 1;
        }
      }
    }
  }
}
</style>
